<style>
   .content-w{
       width: 500px;
   }
</style>
<template>
    <div class="page-container is-form">
        <a-spin :spinning="spinning">
            <a-form :layout="formLayout" :form="form">
                <a-row :gutter="24">
                    <a-col :span="12" class="content-w">
                        <a-form-item label='选择优惠券类型'  v-bind="formItemLayout" >
                            <a-select style="width: 300px"  v-decorator="['type']" v-model="coupon.type">
                                <a-select-option v-for="type in typeList" :value="type.category">{{type.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="content-w">
                        <a-form-item label='优惠券名称'  v-bind="formItemLayout">
                            <a-input placeholder='请输入优惠券名称' v-decorator="['title',{rules: [{ required: true, message: '优惠券名称不能为空!' }]}]" style="width: 300px;"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24"  v-if="coupon.type == 'CASH_COUPON'">
                    <a-col :span="12" class="content-w">
                        <a-form-item label='是否限制订单金额'  v-bind="formItemLayout">
                            <a-radio-group  v-decorator="['isFull',{rules: [{ required: true, message: '请选择是否限制订单金额!'}]}]">
                                <a-radio :value="true">是</a-radio>
                                <a-radio :value="false">否</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="content-w">
                        <a-form-item label='订单金额'  v-bind="formItemLayout">
                            <span class="default_tips tips_right">满</span><a-input-number :precision="2" :min="0" v-decorator="['fullAmount',{rules: [{ required: true, message: '订单金额不能为空!'}]}]"/>
                            <span class="default_tips tips_left">元可用</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" v-if="coupon.type == 'CASH_COUPON'">
                    <a-col :span="12" class="content-w">
                        <a-form-item label='面值'  v-bind="formItemLayout">
                            <a-input-number :precision="2" :min="0" v-decorator="['amount',{rules: [{ required: true, message: '面值不能为空!'}]}]" />
                            <span class="default_tips tips_left">元</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24"  v-if="coupon.type == 'CASH_COUPON'">
                    <a-col :span="12" class="content-w">
                        <a-form-item label='可使用商品'  v-bind="formItemLayout">
                            <a-radio-group defaultValue="ALL" v-model="coupon.userScope" v-decorator="['userScope',{rules: [{ required: true, message: '请选择可使用商品!'}]}]">
                                <a-radio value="ALL">全店通用</a-radio>
                                <a-radio value="TYPE" @click="onChangeType">指定分类</a-radio>
                                <a-radio value="GOODS" @click="onChangeGoods">指定商品</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="content-w" v-if="coupon.userScope == 'TYPE'">
                        <a-form-item label='指定分类'  v-bind="formItemLayout">
                            <a-input v-model="coupon.goodsTypeName" style="width: 300px;" @click="goodsTypeVisible = true" ></a-input>
                            <a-input type="hidden" v-decorator="['companyGoodsTypeId',{rules: [{ required: true, message: '请选择指定分类!'}]}]"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="content-w" v-if="coupon.userScope == 'GOODS'">
                        <a-form-item label='指定商品'  v-bind="formItemLayout">
                            <a-input v-model="coupon.goodsName" style="width: 300px;" @click="goodsVisible = true" ></a-input>
                            <a-input type="hidden" v-decorator="['companyGoodsId',{rules: [{ required: true, message: '请选择指定商品!'}]}]"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24"  v-if="coupon.type == 'EXCHANGE_COUPON'">
                    <a-col :span="12" class="content-w">
                        <a-form-item label='指定商品'  v-bind="formItemLayout">
                            <a-input v-model="goods.name" style="width: 300px;" @click="goodsVisible = true" ></a-input>
                            <a-input type="hidden" v-decorator="['companyGoodsId',{rules: [{ required: true, message: '请选择指定商品!'}]}]"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="content-w">
                        <a-form-item label='可兑换数量'  v-bind="formItemLayout">
                            <a-input-number :min="1" v-decorator="['goodsNum',{rules: [{ required: true, message: '发放总量不能为空!' }]}]"></a-input-number>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="12" class="content-w">
                        <a-form-item label='是否限制发放总量'  v-bind="formItemLayout">
                            <a-radio-group v-model="coupon.isLimit"  v-decorator="['isLimit',{rules: [{ required: true, message: '请选择是否限制发放总量!' }]}]">
                                <a-radio :value="true">是</a-radio>
                                <a-radio :value="false">否</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="content-w" v-if="coupon.isLimit==true">
                        <a-form-item label='发放总量'  v-bind="formItemLayout">
                            <a-input-number :min="1" v-decorator="['num',{rules: [{ required: true, message: '发放总量不能为空!' }]}]">
                            </a-input-number><span class="default_tips tips_left">张</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="12" class="content-w">
                        <a-form-item label='是否永久有效'  v-bind="formItemLayout">
                            <a-radio-group v-model="coupon.isForever"  v-decorator="['isForever',{rules: [{ required: true, message: '请选择是否永久有效!' }]}]">
                                <a-radio :value="true">是</a-radio>
                                <a-radio :value="false">否</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="content-w"  v-if="coupon.isForever==false">
                        <a-form-item label='生效时间'  v-bind="formItemLayout">
                            <a-date-picker v-decorator="['startDate',{rules: [{ required: true, message: '请选择生效时间!' }]}]"
                                           format="YYYY-MM-DD HH:mm:ss" :showTime="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24"  v-if="coupon.isForever==false">
                    <a-col :span="12" class="content-w"></a-col>
                    <a-col :span="12" class="content-w">
                        <a-form-item label='过期时间'  v-bind="formItemLayout">
                            <a-date-picker v-decorator="['endDate',{rules: [{ required: true, message: '请选择过期时间!' }]}]"
                                           format="YYYY-MM-DD HH:mm:ss" :showTime="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="12" class="content-w">
                        <a-form-item label='是否限制每人限领'  v-bind="formItemLayout">
                            <a-radio-group v-model="coupon.isLimitReceive" v-decorator="['isLimitReceive',{rules: [{ required: true, message: '请选择是否限制每人限领!' }]}]">
                                <a-radio :value="true">是</a-radio>
                                <a-radio :value="false">否</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" class="content-w" v-if="coupon.isLimitReceive==true">
                        <a-form-item label='每人限领张数'  v-bind="formItemLayout">
                            <a-input-number :min="1" v-decorator="['receiveNum',{rules: [{ required: true, message: '每人限领张数不能为空!' }]}]">
                            </a-input-number><span class="default_tips tips_left">张</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="12" class="content-w">
                        <a-form-item label='使用说明' v-bind="formItemLayout">
                            <a-textarea placeholder="请输入使用说明" :rows="4" v-decorator="['remark',{rules: [ {validator: checkRemarkLen,}]}]" style="width: 300px;"></a-textarea>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-form-item :wrapperCol="{span:8,offset: 16}">
                    <a-input type="hidden" v-decorator="['id']" />
                    <a-button  type='primary'  :loading="btnLoading" @click="onSubmit">保 存</a-button>
                </a-form-item>
            </a-form>
        </a-spin>
        <a-modal title="选择商品" v-model="goodsVisible" :footer="null" width="800px">
            <goods-list  v-if="goodsVisible" @result="emitGoods"></goods-list>
        </a-modal>
        <a-modal  title="选择商品分类" v-model="goodsTypeVisible" :footer="null" width="800px">
            <goods-type-list  v-if="goodsTypeVisible" @result="emitGoodsType"></goods-type-list>
        </a-modal>
    </div>
</template>

<script>
    import moment from 'moment';
    import {GoodsList,GoodsTypeList} from "./components";
    import {save,findDetail} from "../../api/coupon";

    export default {
        name: "CouponAdd",
        data(){
            return{
                formLayout: 'horizontal',
                form: this.$form.createForm(this),
                spinning:false,
                goodsVisible:false,
                goodsTypeVisible:false,
                goods:{},
                coupon:{
                    userScope:'ALL',
                    isLimit:true,
                    isLimitReceive:true,
                    isForever:false,
                    type:undefined,

                },
                btnLoading:false,
                typeList:[],
                id:0,
            }
        },
        components:{ GoodsList,GoodsTypeList},
        computed: {
            formItemLayout () {
                const { formLayout } = this
                return formLayout === 'horizontal' ? {
                    labelCol: { span:8},
                    wrapperCol: { span:16 },
                } : {}
            },
        },
        watch:{
          'coupon.type':function (val,oldVal) {
              if(val == 'CASH_COUPON'){
                  this.$nextTick(()=>{
                      this.form.setFieldsValue({'isFull':this.coupon.isFull});
                      this.form.setFieldsValue({'fullAmount':this.coupon.fullAmount});
                      this.form.setFieldsValue({'amount':this.coupon.amount});
                      this.form.setFieldsValue({'userScope':this.coupon.userScope});
                      this.form.setFieldsValue({'companyGoodsId':this.coupon.companyGoodsId});
                      this.form.setFieldsValue({'companyGoodsTypeId':this.coupon.companyGoodsTypeId});
                  })
              }
          }
        },
        methods:{
            moment,
            onChangeGoods(){
                this.goods = {};
                this.goodsVisible = true;
            },
            //选择商品完成
            emitGoods(r){
                this.goods = r;
                this.coupon.companyGoodsId = r.id;
                this.coupon.goodsName = r.name;
                this.goodsVisible = false;
                this.form.setFieldsValue({'companyGoodsId': r.id});
            },
            onChangeType(){
              this.goods.typeName = null;
              this.goodsTypeVisible = true;
            },
            //选择分类完成
            emitGoodsType(r){
                console.log("===r",r);
                this.coupon.companyGoodsTypeId = r.id;
                this.goods.typeName = r.name;
                this.goodsTypeVisible = false;
                this.form.setFieldsValue({'companyGoodsTypeId': r.id});
            },
            checkRemarkLen(rule, value, callback){
                if (value && value.length >200) {
                    callback('不能超过200字!')
                } else {
                    callback()
                }
            },
            onSubmit(){
                this.btnLoading = true;
                this.form.validateFields(
                    (err,values) => {
                        if (!err) {
                            if(!values['isForever']){
                                values['startDate'] = values['startDate'].format('YYYY-MM-DD HH:mm:ss');
                                values['endDate'] = values['endDate'].format('YYYY-MM-DD HH:mm:ss');
                            }

                            this.onSave(values);
                        }else{
                            this.btnLoading = false;
                        }
                    },
                )
            },
            async onSave(data){
                this.spinning = true;
                let resp = await save(this.id,data);
                this.spinning = false;
                let _this = this;
                if(this.qUtil.validResp(resp)){
                    this.$success({title:'保存成功!',okText:'确定',
                        onOk(){_this.$router.push({name:'CouponList'});}
                    });
                }else{
                    this.$error({title:resp.msg,okText:'确定'});
                    this.bntLoading = false;
                }
            },

            async onLoad(){
                if(this.id==0) return false;
                this.loading = true;
                let resp = await findDetail(this.id);
                if(this.qUtil.validResp(resp)){
                    this.coupon = resp.data.coupon;
                    console.log('======coupon',this.coupon);
                    this.form.setFieldsValue(this.coupon);
                }
            }
        },
        mounted(){
            this.id = this.$route.query.id;
            this.onLoad();
        }
    }
</script>

<style scoped>

</style>